<template>
  <div id="echarts4"></div>
</template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
  },

  mounted() {
    this.showEcharts4()
  },
  created() {},
  methods: {
    showEcharts4() {
      let myChart = this.$echarts.init(document.getElementById('echarts4'))
      var img =
        ''
      var trafficWay = this.data
      var data = []
      var color = ['#006ced', '#00cfff', '#ffe000', '#ffa800', '#ff5b00', '#ff3000']
      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 8,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: '',
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0,
              },
            },
          }
        )
      }
      var seriesOption = [
        {
          name: '',
          type: 'pie',
          clockWise: false,
          radius: ['60%', '65%'],
          center: ['50%', '50%'],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                color: '#ddd',
                formatter: function (params) {
                  var percent = 0
                  var total = 0
                  for (var i = 0; i < trafficWay.length; i++) {
                    total += Number(trafficWay[i].value)
                  }
                  percent = ((Number(params.value) / total) * 100).toFixed(0)
                  if (params.name !== '') {
                    return [`{a|${params.name}}\n{b|${params.value}} | {c|${percent}%}`]

                  } else {
                    return ''
                  }
                },
                rich: {
                  a: {
                    fontSize: 14,
                    color: '#fff',
                  },
                  b: {
                    fontSize: 14,
                    color: '#fff',
                    padding: [5, 5, 0, 5],
                  },
                  c: {
                    fontSize: 14,
                    color: '#fff',
                    padding: [5, 5, 0, 5],
                  },
                },
              },
              labelLine: {
                length: 20,
                length2: 45,
                show: true,
                color: '#00ffff',
              },
            },
          },
          data: data,
        },
      ]
      let option = {
        color: color,
        title: {
          text: '',
          top: '48%',
          textAlign: 'center',
          left: '49%',
          textStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: '400',
          },
        },
        graphic: {
          // 中间黄色的图片
          elements: [
            {
              type: 'image',
              z: 3,
              style: {
                image: img,
                width: 115,
                height: 115,
              },
              left: 'center',
              top: 'center',
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        // legend: {
        //   icon: 'circle',
        //   orient: 'horizontal',
        //   // x: 'left',
        //   data: ['全民', '竣工未结项项目'],
        //   right: 170,
        //   bottom: 100,
        //   align: 'right',
        //   textStyle: {
        //     color: '#fff',
        //   },
        //   itemGap: 20,
        // },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      }
      myChart.setOption(option)
    },
  },
}
</script>
